<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
          
          
            *{
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            img{
                width: 100%;
            }
            main{
                width:800px;
                height: 200px;
                padding:20px;
                border:2px solid #999999;
                margin:20px auto 0px;
            }
            ul li{
                width: 200px;
                

                line-height: 40px;
                text-align: center;
                float: left;
                cursor: pointer;
            }
            a{
                font-size: 14px;
               

                text-decoration: none;
                color:black;
            }
            .current{   
                background:#33CCCC;
                color:white;
            }
            div{
                

                display: none;
            }
            .cla{
                

                display: block;
            }
        </style>
    </head>
    <body>
        <img src="images/lol.jpg" alt="">
        <main >
            <ul><li class="current">正在进行</li>
                <li>商城特惠</li>
                <li>长期活动</li>
                 <li>更多→</li>

        </ul>
        <section>
            <div class="cla">
           <a href="">阿卡丽的黑金商店</a> <br> <br>
              <a href="">K/DA阿狸限定雕塑</a> <br> <br>
          <a href="">MSI定制语音包</a> <br> <br>
          <a href="">2021幸运一夏</a>
            </div>
      
         <div> 
             <a href="">K/DA联名外设新品</a> <br> <br>
              <a href="">战队皮肤限时销售</a> <br> <br>
              <a href="">520周边好物推荐</a>
         </div>
      
      <div>
         <a href="">探寻破败的起源</a> <br> <br>
      
         <a href="">水晶玫瑰&幽梦玫瑰</a> <br> <br>
         <a href="">【峡谷之巅】招募令</a>
      </div>
      
      <div>
    
        <a href="">DWG限定皮肤</a><br> <br>
        <a href=""> 福牛守护者</a> <br> <br>
        <a href="">作者入驻计划</a>  <br> <br>
 

      </div>
      
      
      
             </section>

            <script>
                var tags=document.getElementsByTagName('li');
                var boxs=document.getElementsByTagName('div');
                for(var i=0;i<tags.length;i++){
                   


                    tags[i].index=i;

                    tags[i].onclick=function(){
                      

                        for(var m=0;m<tags.length;m++){
                            tags[m].className='';
                            boxs[m].className='';
                        }
                      

                        this.className='current';

                      

                        var n=this.index;
                        boxs[n].className='cla'
                    }
                }
            </script>
        </main>
    </body>
</html>